<!DOCTYPE html>
<!--suppress HtmlUnknownAttribute -->
<html lang="zh-Hans-CN" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header"/>
  <title>日志列表</title>
</head>
<body class="pear-container">

<div sec:authorize="hasAnyAuthority('ROLE_ADMIN','sys:log:remove')" class="layui-card">
  <div class="layui-card-body">
    <form action="" class="layui-form" lay-filter="remove-log-form">
      <div class="layui-form-item">
        <button class="pear-btn pear-btn-md pear-btn-primary" lay-filter="remove-log" lay-submit>
          清 空 日 志
        </button>
      </div>
    </form>
  </div>
</div>

<div class="layui-card">
  <div class="layui-card-body">
    <div class="layui-tab layui-tab-card">
      <ul class="layui-tab-title">
        <li class="layui-this">登录日志</li>
        <li>操作日志</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <table id="log-login-table" lay-filter="log-login-table" style="margin-top: 10px;"></table>
        </div>
        <div class="layui-tab-item">
          <table id="log-operate-table" lay-filter="log-operate-table" style="margin-top: 10px;"></table>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

<script id="log-status" type="text/html">
  {{#if (d.success == true) { }}
  <span style="color: green">成功</span>
  {{# }else if(d.success == false){ }}
  <span style="color: red">失败</span>
  {{# } }}
</script>

<script id="log-bar" type="text/html">
  <button class="pear-btn pear-btn-sm pear-btn-primary" lay-event="details">
    <i class="pear-icon pear-icon-edit"></i>
  </button>
</script>

<th:block th:include="include :: footer"/>
<script>
  layui.use(['table', 'form', 'jquery', 'element', 'popup', 'util'], function () {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;
    let popup = layui.popup;

    let MODULE_PATH = "/system/log/";

    let cols = [
      [
        {title: '操作', field: 'title', align: 'center'},
        {title: '请求方式', field: 'method', align: 'center'},
        {title: '接口', field: 'operateUrl', align: 'center'},
        {title: '浏览器', field: 'browser', align: 'center'},
        {title: '操作地址', field: 'operateAddress', align: 'center'},
        {title: '访问时间', field: 'createTime', align: 'center', width: 200},
        {title: '操作人', field: 'operateName', align: 'center'},
        {title: '结果', templet: '#log-status', align: 'center'},
        {title: '详情', templet: '#log-bar', align: 'center', width: 120}
      ]
    ]

    table.render({
      elem: '#log-operate-table',
      url: MODULE_PATH + 'operateLog',
      page: true,
      cols: cols,
      skin: 'line',
      toolbar: false
    });

    table.render({
      elem: '#log-login-table',
      url: MODULE_PATH + 'loginLog',
      page: true,
      cols: cols,
      skin: 'line',
      toolbar: false
    });

    form.on('submit(remove-log)', function () {
      let loading = layer.load();
      $.ajax({
        url: '/system/log/removeAll',
        dataType: 'json',
        type: 'delete',
        success: function (result) {
          layer.close(loading);
          if (result.success) {
            popup.success(result.msg, function () {
              table.reload('log-login-table');
              table.reload('log-operate-table');
            })
          } else {
            popup.failure(result.msg);
          }
        }
      })
      return false;
    });

    table.on('tool(log-operate-table)', function (obj) {
      if (obj.event === 'details') {
        window.info(obj);
      }
    });

    table.on('tool(log-login-table)', function (obj) {
      if (obj.event === 'details') {
        window.info(obj);
      }
    });

    window.info = function (obj) {
      layer.open({
        type: 2,
        title: '详细信息',
        shade: 0,
        area: ['400px', '400px'],
        content: MODULE_PATH + "info",
        success: function (layero) {
          let iframeWin = window[layero.find('iframe')[0]['name']];
          iframeWin.show(obj.data);
        }
      });
    }
  })
</script>
</html>
